<template>
  <Layout>
    <Header>

      <Row type="flex" justify="space-around" class="flexBtn">
        <i-col>
          <Button type="primary" @click="addWorker=true" icon="ios-add-circle-outline">添加员工</Button>
        </i-col>
        <i-col>
          <i-button type="error" icon="ios-close-circle-outline" @click="deleteGroup=true">删除员工</i-button>
        </i-col>
        <i-col>
          <Upload
                  action="http://47.101.180.43:8080/personInfo/import"
                  header="Content-Type:application/multipart/form-data"
                  :before-upload="uploadBefore"
                  :show-upload-list="false"
                  :format="['xls']"
                  accept=".xls,.xlsx"
                  name="multipartFile"
          >
            <Button icon="ios-cloud-upload-outline" type="primary">导入员工</Button>
          </Upload>
        </i-col>
        <i-col>
          <i-button type="primary" icon="ios-cloud-download-outline" @click="downloadFile">获取模板</i-button>
        </i-col>

        <i-col>
          <Input
            search
            enter-button="搜索"
            placeholder="请输入搜索内容..."
            v-model="searchKey"
            @on-search="submitSearch(1)"
          />
        </i-col>
      </Row>
      <Modal v-model="lookImport" title="导入员工信息预览" footer-hide width="1000px" >
        <div >
          <Table :columns="importColumns" :data="this.importData.slice((this.importNum-1)*this.importSize,this.importNum*this.importSize)" border   stripe  size="large"></Table>
          <br />
          <Page
            :total="importTotal"
            :current="importNum"
            :page-size="importSize"
            show-elevator
            show-total
            placement="top"
            @on-change="handleImportPage"
          ></Page>
        </div>
          <div style="margin-top:10px" class="center">
            <Button type="primary" style="margin-right:40px" @click="importOk">导入</Button>
            <Button @click="importNotOk">取消</Button>
          </div>
      </Modal>
    </Header>

    <content>
      <i-table
        id="table"
        ref="workerTable"
        border
        stripe
        content="self"
        :columns="columns"
        :data="table"
        size="large"
        @on-selection-change="keepSelect"
      />
      <br />
      <Page
        :total="pageTotal"
        :current="pageNum"
        :page-size="pageSize"
        show-elevator
        show-total
        placement="top"
        @on-change="handlePage"
      ></Page>
    </content>
    <Modal v-model="addWorker" title="添加员工" footer-hide width="600px">
      <div slot="header" style="fontSize:14px;fontWeight:bold">
        <span>添加员工</span>
      </div>
      <div class="center"> 
        <i-form ref="addForm" :model="addForm" :rules="addRule" :label-width="80" inline style="">
            <Form-item  label="员工性别" prop="sex">
            <RadioGroup style="width:162px" v-model="addForm.sex">
              <Radio label="男"></Radio>
              <Radio label="女"></Radio>
            </RadioGroup>
          </Form-item>
          <Form-item label="员工编号" prop="number">
            <i-input type="text" id="number" v-model="addForm.number" :value.sync="addForm.number" />
          </Form-item>
          <Form-item label="员工姓名" prop="name">
            <i-input type="text" id="name" v-model="addForm.name" :value.sync="addForm.name" />
          </Form-item>
          <Form-item label="出生年月" prop="birthday">
            <Date-picker
              style="width:162px"
              type="date"
              placeholder="选择日期"
              placement="bottom"
              :value.sync="addForm.birthday"
              v-model="addForm.birthday"
              :options="dateOptions"
            ></Date-picker>
          </Form-item>
          <Form-item label="员工电话" prop="phone">
            <i-input type="text" id="phone" v-model="addForm.phone" :value.sync="addForm.phone" />
          </Form-item>
          <Form-item label="员工职称">
            <i-input
              type="text"
              id="positionTitle"
              v-model="addForm.positionTitle"
              :value.sync="addForm.positionTitle"
            />
          </Form-item>
          <Form-item label="员工职位" >
            <i-input
              type="text"
              id="position"
              v-model="addForm.position"
              :value.sync="addForm.position"
            />
          </Form-item>
          <Form-item label="项目负责人" prop="isleader">
            <Checkbox style="width:41px" @on-change="addJudgeLe" v-model="addForm.isleader"></Checkbox>
          </Form-item>
          <Form-item label="环评工程师" prop="isengineer">
            <Checkbox
              style="width:40px"
              :disabled="addForm.disable==1||addForm.disable==2?false:true"
              @on-change="addJudgeEn"
              v-model="addForm.isengineer"
            ></Checkbox>
          </Form-item>
          <Form-item label="负责行业" prop="industry">
            <i-select
              style="width:162px"
              :disabled="addForm.disable==2?false:true"
              v-model="addForm.industry"
            >
              <i-option v-for="item in industryList" :key="item.id" :value="item.id">{{ item.name }}</i-option>
            </i-select>
          </Form-item>
        </i-form>
      </div>
      <div class="center">
        <Button type="primary" style="margin-right:40px" @click="addOk">确定</Button>
        <Button @click="addNotOk">取消</Button>
      </div>
    </Modal>
       <Modal v-model="updateWorker" title="修改信息" footer-hide width="600px">
      <div slot="header" style="fontSize:14px;fontWeight:bold">
        <span>修改员工信息</span>
      </div>
      <div class="center"> 
        <i-form ref="edit" :model="edit" :rules="editRule" :label-width="80" inline>
            <Form-item  label="员工性别" prop="sex">
            <RadioGroup style="width:162px" v-model="edit.sex">
              <Radio label="男"></Radio>
              <Radio label="女"></Radio>
            </RadioGroup>
          </Form-item>
          <Form-item label="员工姓名" prop="name">
            <i-input type="text" v-model="edit.name" :value.sync="edit.name" />
          </Form-item>
          <Form-item label="出生年月" prop="birthday">
            <Date-picker
              style="width:162px"
              type="date"
              placeholder="选择日期"
              placement="bottom"
              :value.sync="edit.birthday"
              v-model="edit.birthday"
              :options="dateOptions"
            ></Date-picker>
          </Form-item>
          <Form-item label="员工电话" prop="phone">
            <i-input type="text" v-model="edit.phone" :value.sync="edit.phone" />
          </Form-item>
          <Form-item label="员工职称">
            <i-input
              type="text"
              v-model="edit.positionTitle"
              :value.sync="edit.positionTitle"
            />
          </Form-item>
          <Form-item label="员工职位" >
            <i-input
              type="text"
              v-model="edit.position"
              :value.sync="edit.position"
            />
          </Form-item>
          <Form-item label="项目负责人" prop="isleader">
            <Checkbox style="width:41px" @on-change="updateJudgeLe" v-model="edit.isleader"></Checkbox>
          </Form-item>
          <Form-item label="环评工程师" prop="isengineer">
            <Checkbox
             
              :disabled="edit.disable==1||edit.disable==2?false:true"
              @on-change="updateJudgeEn"
              v-model="edit.isengineer"
            ></Checkbox>
          </Form-item>
          <Form-item label="负责行业" prop="industry">
            <i-select
              style="width:162px"
              :disabled="edit.disable==2?false:true"
              v-model="edit.industry"
            >
              <i-option v-for="item in industryList" :key="item.id" :value="item.id">{{ item.name }}</i-option>
            </i-select>
          </Form-item>
        </i-form>
      </div>
      <div class="center">
        <Button type="primary" style="margin-right:40px" @click="editOk">确定</Button>
        <Button @click="editNotOk">取消</Button>
      </div>
    </Modal>
    <Modal v-model="deleteWorker" title="删除员工" @on-ok="deleteOk">
      <div slot="header" style="fontSize:14px;fontWeight:bold">
        <span>删除员工</span>
      </div>
      <div class="center warningInfo">
          <Icon type="ios-alert" class="warnIcon"/>确认删除该员工吗
      </div>
    </Modal>
    <Modal v-model="deleteGroup" title="删除员工" @on-ok="deleteGroupOk">
      <div slot="header" style="fontSize:14px;fontWeight:bold">
        <span>删除员工</span>
      </div>
      <div class="center warningInfo">
          <Icon type="ios-alert" class="warnIcon"/>确认删除当前页选中的员工吗
      </div>
    </Modal>
    <Modal v-model="forbidWorker" title="禁用员工" @on-ok="forbidOk">
      <div slot="header" style="fontSize:14px;fontWeight:bold">
        <span>禁用员工</span>
      </div>
        <div class="center warningInfo">
          <Icon type="ios-alert" class="warnIcon"/>确认禁用该员工吗
      </div>
    </Modal>
  </Layout>
</template>
<script>
import XLSX from 'xlsx';
export default {
  data() {
    //检查输入的内容是否为空、含有空格或者含有数字
    const validateInput = (rule, value, callback) => {
      const res=this.common.judgeInput(value);
      if(res===-1){
        callback(new Error('输入只能是汉字或英文符号'));
      }else{
        callback();
      }
    };
    //检查输入的编号是否为空、含有空格
    const validateNumberInput = (rule, value, callback) => {
      const res=this.common.judgeNumberInput(value);
      if(res===-1){
        callback(new Error('输入只能是汉字、英文或数字符号'));
      }else{
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      var pattern = /^1[34578]\d{9}$/;
      if (value === "") {
        callback(new Error("请输入联系方式"));
      } else if (value.length !== 11 || !pattern.test(value)) {
        callback(new Error("手机格式不正确"));
      } else {
        callback();
      }
    };
    return {
      //上传进度
      progress:0,
      //绑定员工生日，要求日期不能为未来
      dateOptions: {
        disabledDate(date) {
          return date && date.valueOf() >= Date.now();
        }
      },
      /**绑定每行的信息 */
      row: {},
      /**分别绑定添加、更新、删除、禁用员工、预览导入员工信息的弹窗 */
      addWorker: false,
      updateWorker: false,
      deleteWorker: false,
      forbidWorker: false,
      deleteGroup: false,
      lookImport:false,
      //记录导入员工预览信息的表头、总数据、原始表
      importColumns:[],
      importData:[],
      imprtFile:'',
      //记录导入员工预览信息分页的页面和页容量
      importTotal:0,
      importNum:1,
      importSize:5,
      /**searchKey绑定搜索输入的关键字 ,searchTag绑定是否点击搜索*/
      searchKey: "",
      /**为所以员工信息表page的属性设置初始值 */
      pageTotal: 0,
      pageNum: 1,
      pageSize: 8,
      /**给添加员工和修改员工的选择框确定初始值，修改员工内的属性一律末尾为2
       * 添加员工的表单默认都为false，并且两个有权限的选择框都不可选
       * 修改员工的表单根据每行的数据在方法showAction()中处理
       */
      /**add内存放有关添加员工的所有信息 */
      addForm: {
        number:null,
        name: "",
        sex: "",
        birthday: "",
        phone: "",
        positionTitle: "",
        position: "",
     
        isleader: false,
        isengineer: false,
        industry: 0,
          /**
         * 0--不是负责人，则环评工程师、行业类别不可选；         
         * 1--是负责人，则环评工程师可选，行业类别不可选；
         * 2--是负责人，也是工程师，则行业类别可选
         */
        disable:0
      },
      addRule: {
        number:[
          {required: true, message: "请填写员工编号", trigger: "blur" },
          {  validator: validateNumberInput, trigger: 'blur'}
        ],
        name: [
          {required: true, message: "请填写用户名", trigger: "blur" },
          { validator: validateInput, trigger: 'blur'}],
        sex: [
          {
            required: true,
            message: "请填写性别",
            trigger: "blur"
          }
        ],
        birthday: [
          {
             type: 'date',
            required: true,
            message: "请填写出生年月",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            message: "请填写电话号码",
            trigger: "blur"
          },
          {
            validator: validatePhone,
            trigger: "blur"
          }
        ],
        // positionTitle: [
        //   {
        //     required: true,
        //     message: "请填写职称",
        //     trigger: "blur"
        //   },
        //   { validator: validateInput, trigger: 'blur'},
        // ],
        // position: [
        //   {
        //     required: true,
        //     message: "请填写职位",
        //     trigger: "blur"
        //   },
        //   { validator: validateInput, trigger: 'blur'},
        // ],
        isleader: [],
        isengineer: [],
        industry: []
      },
      /**submitAdd里面存放可以给后端识别的信息 */
      submitAdd: {
        number:null,
        name: "",
        gender: false,
        birthday: "",
        phone: "",
        state: 1,
        positionTitle: "",
        position: "",
        leaderTag: false,
        registeredEiaEngineerTag: false,
        industryTypeId: 0
      },
      /**edit内存放有关Modal修改员工信息的所有信息 */
      edit: {
        //id:'',
        //number:'',
        name: "",
        sex: "",
        birthday: "",
        phone: "",
        positionTitle: "",
        position: "",
        isleader: false,
        isengineer: false,
        industry: 0,
               /**
         * 0--不是负责人，则环评工程师、行业类别不可选；         
         * 1--是负责人，则环评工程师可选，行业类别不可选；
         * 2--是负责人，也是工程师，则行业类别可选
         */
        disable:0
      },
      editRule: {
        name: [
          {required: true, message: "请填写用户名", trigger: "blur" },
          { validator: validateInput, trigger: 'blur'}],
        sex: [
          {
            required: true,
            message: "请填写性别",
            trigger: "blur"
          }
        ],
        birthday: [
          {
            type: 'date',
            required: true,
            message: "请填写出生年月",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            message: "请填写电话号码",
            trigger: "blur"
          },
          {
            validator: validatePhone,
            trigger: "blur"
          }
        ],
        // positionTitle: [
        //   {
        //     required: true,
        //     message: "请填写职称",
        //     trigger: "blur"
        //   },
        //   { validator: validateInput, trigger: 'blur'},
        // ],
        // position: [
        //   {
        //     required: true,
        //     message: "请填写职位",
        //     trigger: "blur"
        //   },
        //   { validator: validateInput, trigger: 'blur'},
        // ]
      },
      /**submitEdit里面存放可以给后端识别的信息 */
      submitEdit: {
        id: "",
        number: "",
        name: "",
        gender: false,
        birthday: "",
        phone: "",
        state: "",
        positionTitle: "",
        position: "",
        leaderTag: false,
        registeredEiaEngineerTag: false
        // industryTypeId:0,
      },
      /**selectList存放选中的员工 */
      selectList: [],
      columns: [
        {
          type: "selection",
          title: "选项",
          width:50,
        },
        {
          title: "状态",
          key: "state",
         width: 65,
          /**渲染一个现实员工是否禁用的图标 ,其中deleteTag为1时表示禁用*/
          render: (h, params) => {
            var text = "";
            var iconType = "";
            var iconColor = "";
            if (params.row.state == 0) {
              text = "删除状态";
              iconType = "ios-close-circle";
              iconColor = "gray";
            } else if (params.row.state == 1) {
              (text = "非禁用状态"), (iconType = "md-checkmark-circle");
              iconColor = "#58c38b";
            } else if (params.row.state == 2) {
              text = "被关联状态";
              iconType = "md-locate";
              iconColor = "#58c38b";
            } else if (params.row.state == 3) {
              text = "禁用状态";
              iconType = "ios-close-circle";
              iconColor = "#f88081";
            }
            if (params.row.state != null) {
              return h("div", [
                h(
                  "Tooltip",
                  {
                    props: {
                      placement: "bottom",
                      content: text,
                      transfer: true
                    }
                  },
                  [
                    h("Icon", {
                      props: {
                        type: iconType
                      },
                      style: {
                        fontSize: "18px",
                        color: iconColor
                      }
                    })
                  ]
                )
              ]);
            }
          }
        },
        {
          title: "员工编号",
          key: "number",
          minWidth:120
        },
        {
          title: "姓名",
          key: "name",
         minWidth:120,
          //用颜色改变名字区分部长和普通员工
          render: (h, params) => {
            var minister = "";
            if (params.row.ministerTag == 1) {
              minister = "部长";
            } else {
              minister = "非部长";
            }
            return h(
              "Tooltip",
              {
                props: {
                  placement: "bottom",
                  content: minister,
                  transfer: true
                }
              },
              [
                h(
                  "span",
                  {
                    style: {
                      color: params.row.ministerTag == 1 ? "#CD1076" : "black"
                    }
                  },
                  params.row.name
                )
              ]
            );
          }
        },
        {
          title: "性别",
          key: "sex",
          width:65
        },
        {
          title: "出生年月",
          key: "birthday",
          minWidth:120
        },
        {
          title: "部门",
          key: "departmentName",
          minWidth:120
        },
        {
          title: "电话",
          key: "phone",
         minWidth:130
        },
        {
          title: "职称",
          key: "positionTitle",
          minWidth:120
        },
        {
          title: "职位",
          key: "position",
          minWidth:120
        },
        {
          title: "项目负责人",
          key: "isleader",
          minWidth:120
        },
        {
          title: "环评工程师",
          key: "isengineer",
         minWidth:120
        },
        {
          title: "负责行业类别",
          key: "industryTypeName",
          minWidth:140
        },
        {
          title: "操作",
          key: "action",
          width:100,
          fixed: 'right',
          render: (h, params) => {
            return h(
              "Dropdown",
              {
                on: {
                  "on-click": name => {
                    this.showAction(name, params.row);
                  }
                },
                props: {
                  transfer: true
                }
              },
              [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary"
                    }
                  },
                  "操作"
                ),
                h(
                  "DropdownMenu",
                  {
                    slot: "list"
                  },
                  [
                    h(
                      "DropdownItem",
                      {
                        props: {
                          name: "update",
                          style: "position:absolute"
                        }
                      },
                      "修改员工信息"
                    ),
                    h(
                      "DropdownItem",
                      {
                        props: {
                          name: "delete",
                          style: "position:absolute"
                        }
                      },
                      "删除员工"
                    ),
                    h(
                      "DropdownItem",
                      {
                        props: {
                          name: "forbid",
                          style: "position:absolute"
                        }
                      },
                      "禁用员工"
                    )
                  ]
                )
              ]
            );
          }
        }
      ],
      /**table显示所有员工信息，向后端请求得到 */
      table: [],
      /**存放所有行业类别，以供下拉菜单选择 */
      industryList: []
    };
  },
  beforeMount() {
    /**渲染前先默认获取第一页员工信息*/
    this.pageNum = 1;
    this.submitworkerinfo();
    /**渲染前先获取行业信息 */
    this.submitGetIndustry();
  },
  methods: {
    //下载导入员工模板文件
    downloadFile(){
        window.open(this.common.TempleUrl);
    },
    addJudgeLe() {
      if (this.addForm.isleader) {
        //若为项目负责人，则环评工程师可选
        this.addForm.disable=1;
        //此时，环评工程师不应该选择
        this.addForm.isengineer=false;
      } else {
        //否则，环评工程师和负责行业都不可选
        this.addForm.disable=0;
         //此时，环评工程师不应该选择
        this.addForm.isengineer=false;
      }
    },
    addJudgeEn() {
      if (this.addForm.isengineer) {
        //若为环评工程师，则负责行业可选
      //  this.addForm.industry_disable = false;
      this.addForm.disable=2;
      } else {
        //否则，负责行业不可选
        this.addForm.disable=1;
     //   this.addForm.industry_disable = true;
      }
    },
    updateJudgeLe() {
      if (this.edit.isleader) {
        //若为项目负责人，则环评工程师可选
        this.edit.disable=1;
        //此时，环评工程师不应该选中
        this.edit.isengineer=false;
      } else {
        //否则，环评工程师和负责行业都不可选
        this.edit.disable=0
        //此时，环评工程师不应该选中
        this.edit.isengineer=false;
      }
    },
    updateJudgeEn() {
      //选为工程师，则行业类别可选
      if (this.edit.isengineer) {
      //   this.edit.industry_disable = false;
      this.edit.disable=2;
      } else {
        //工程师可选，行业类别不可选
        // this.edit.industry_disable = true;
        this.edit.disable=1;
      }
    },
    /**保存当前页选中的项 */
    keepSelect(selection) {
      var i = 0;
      this.selectList = [];
      for (i = 0; i < selection.length; i++) {
        this.selectList.push(selection[i].id);
      }

    },
    /**点击修改员工信息弹出弹窗前的默认赋值 */
    updateDefault() {
      this.edit.name = this.row.name;
      this.edit.sex = this.row.sex;
      this.edit.birthday = this.row.birthday;
      this.edit.phone = this.row.phone;
      this.edit.positionTitle = this.row.positionTitle;
      this.edit.position = this.row.position;
      if (this.row.isleader == "是") {
        /**如果为项目负责人，则默认勾选，并且将环评工程师设为可选 */
        this.edit.isleader = true;
       this.edit.disable=1;
        if (this.row.isengineer == "是") {
          /**如果为环评工程师，则默认勾选，并且将负责行业设为可选 */
          this.edit.disable=2;
          this.edit.isengineer = true;
          if (this.row.industryTypeName != "") {
            /**如果负责行业不为空则默认选择对应行业 */
            var num = parseInt(this.row.industryTypeId);
            this.edit.industry = num;
          } else {
            /**如果负责行业为空则默认不选择 */
            this.edit.industry = 0;
          }
        } else {
          /**不为环评工程师，则默认不勾选，并且将负责行业设为不可选 */
          this.edit.disable=1;
          this.edit.isengineer = false;
          this.edit.industry = 0;
        }
      } else {
        /**不为项目负责人，就将所有有关勾选框的值置为初始时候 */
        this.edit.disable=0;
        this.edit.isleader = false;
        this.edit.isengineer = false;
        this.edit.industry = 0;
      }


    },
    /**点击不同操作的时候，弹出不同的弹窗 */
    showAction(name, row) {
      this.row = row;
      if (name == "update") {
        this.updateDefault();
        this.updateWorker = true;
      } else if (name == "delete") {
        this.deleteWorker = true;
      } else {
        this.forbidWorker = true;
      }
    },
    DateToString(date) {

      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        var newmonth = "0" + month;
        month = newmonth;
      }
      if (day < 10) {
        var newday = "0" + day;
        day = newday;
      }
      var sDate = year + "-" + month + "-" + day;
      return sDate;
    },
    /**用户点击确认添加员工时的回调 */
    addOk() {
      this.$refs["addForm"].validate(valid => {
        if (valid) {
          this.submitAdd.name = this.addForm.name;
          if (this.addForm.sex == "女") {
            this.submitAdd.gender = true;
          } else {
            this.submitAdd.gender = false;
          }
          this.submitAdd.number=this.addForm.number;
          this.submitAdd.birthday = this.DateToString(this.addForm.birthday);
          this.submitAdd.phone = this.addForm.phone;
          this.submitAdd.positionTitle = this.addForm.positionTitle;
          this.submitAdd.position = this.addForm.position;
          if (this.addForm.isleader == true) {
            this.submitAdd.leaderTag = true;
          } else {
            this.submitAdd.leaderTag = false;
          }
          if (this.addForm.isengineer == true) {
            this.submitAdd.registeredEiaEngineerTag = true;
          } else {
            this.submitAdd.registeredEiaEngineerTag = false;
          }
          this.submitAdd.industryTypeId = this.addForm.industry;
          this.submitAddPerson();
        }
      });
    },
    /**用户点击取消添加员工时的回调 */
    addNotOk() {
      this.addForm.number=null;
      this.addForm.name = "",
        this.addForm.sex = "",
        this.addForm.birthday = "",
        this.addForm.phone = "",
      this.addForm.positionTitle = "",
        this.addForm.position = "",
        this.addForm.isleader = false,
        this.addForm.isengineer = false,
        this.addForm.industry = "",
        this.addForm.disable=0;
      this.addWorker=false;

    },
    /**用户点击确定修改员工信息时的回调 */
    editOk() {
      this.$refs["edit"].validate(valid => {
        if (valid) {
          this.submitEdit.id = this.row.id;
          this.submitEdit.number = this.row.number;
          this.submitEdit.name = this.edit.name;
          if (this.edit.sex == "女") {
            this.submitEdit.gender = true;
          } else {
            this.submitEdit.gender = false;
          }
          if (this.edit.birthday !== this.row.birthday) {
            this.submitEdit.birthday = this.DateToString(this.edit.birthday);
          } else {
            this.submitEdit.birthday = this.edit.birthday;
          }
          this.submitEdit.phone = this.edit.phone;
          this.submitEdit.state = this.row.state;
          this.submitEdit.positionTitle = this.edit.positionTitle;
          this.submitEdit.position = this.edit.position;
          this.submitEdit.leaderTag = this.edit.isleader;
          this.submitEdit.registeredEiaEngineerTag = this.edit.isengineer;
          this.submitEdit.industryTypeId = this.edit.industry;

          this.submitEditPersonInfo();
          this.updateWorker=false;

        }
      })

    },
    editNotOk() {
      this.edit.industry = 0;

      this.updateWorker=false;
    },
    /**deleteOk 确认删除一个员工时的回调*/
    deleteOk() {
      this.submitDeleteById();
    },
    /**deleteGroupOk确认删除一批员工时的回调 */
    deleteGroupOk() {
      this.submitDeleteByList();
    },
    /**点击确认禁用员工时的回调 */
    forbidOk() {
      this.submitForbid();
    },
    /**获取所有行业类别的方法*/
    submitGetIndustry() {
      this.apis.staffApis.getIndustryTypes(this.pageNum,res=>{
 
        var code=res.code;
        if(code===0){
          this.industryList=res.data.list;
        }
      })
    },
    //通过提交页码来获取员工信息的方法
    submitworkerinfo() {
      //在axios中要用=>函数，否则会遇到this不指向该vue的问题，导致.then函数中无法访问this
      this.apis.staffApis.personInfoShow(this.pageNum,this.pageSize,res=>{

          var code = res.code;
          if (code === 0) {
            var list = res.data.list;
            var total = res.data.total;
            var i = 0;
            //将后端传过来的布尔值转为可以显示的中文
            for (i = 0; i < list.length; i++) {
              if (list[i].gender == true) {
                list[i].sex = "女";
              } else if (list[i].gender == false) {
                list[i].sex = "男";
              }
              if (list[i].leaderTag == true) {
                list[i].isleader = "是";
              } else if (list[i].leaderTag == false) {
                list[i].isleader = "否";
              }
              if (list[i].registeredEiaEngineerTag == true) {
                list[i].isengineer = "是";
              } else if (list[i].registeredEiaEngineerTag == false) {
                list[i].isengineer = "否";
              }
            }
            this.pageTotal = total;
            this.table = list;
          }
      })
    },
    //翻页的方法
    handlePage(value) {
      this.pageNum = value;
      this.submitSearch(0);
    },
    /**提交添加员工的请求 */
    submitAddPerson() {
      console.log("添加信息：",this.submitAdd.industryTypeId,this.submitAdd)
      this.apis.staffApis.personInfoAdd(this.submitAdd.industryTypeId,this.submitAdd,res=>{
          var code = res.code;
          console.log("添加员工反馈：",res);
          if (code === 0) {
            this.$Message.success(res.data);
            this.addWorker=false;
          } else {
            this.$Message.error(res.msg);
          }
          this.pageNum = 1;
          this.submitworkerinfo();
      })
    },
    /**提交修改员工信息的请求 */
    submitEditPersonInfo() {
      this.apis.staffApis.personInfoUpdate(this.submitEdit.industryTypeId,this.submitEdit,res=>{

          var code = res.code;
          if (code === 0) {
            this.$Message.success(res.data);
          } else {
            this.$Message.error(res.msg);
          }
          this.pageNum = 1;
          this.submitworkerinfo();
          this.edit.industry = "";
      })
    },
    /**提交模糊搜索员工的请求 */
    submitSearch(num) {
      //num==0表示通过反应搜索，页码不置为1；否则通过搜索查找，页码置为1
      if(num===1){
        this.pageNum=1;
      }
      this.apis.staffApis.personInfoSelect(this.pageNum,this.pageSize,this.searchKey,res=>{

          var code = res.code;
          if (code === 0) {
            var list = res.data.list;
            var total = res.data.total;
            var i = 0;
            //将后端传过来的布尔值转为可以显示的中文
            for (i = 0; i < list.length; i++) {
              if (list[i].gender == true) {
                list[i].sex = "女";
              } else if (list[i].gender == false) {
                list[i].sex = "男";
              }
              if (list[i].leaderTag == true) {
                list[i].isleader = "是";
              } else if (list[i].leaderTag == false) {
                list[i].isleader = "否";
              }
              if (list[i].registeredEiaEngineerTag == true) {
                list[i].isengineer = "是";
              } else if (list[i].registeredEiaEngineerTag == false) {
                list[i].isengineer = "否";
              }
            }
            this.pageTotal = total;
            this.table = list;
          } else {
            this.pageTotal = 0;
            this.table = "";
          }
      })
    },
    /**提交删除一个员工的请求 */
    submitDeleteById() {
      this.apis.staffApis.personInfoDelete(this.row.id,res=>{

          var code = res.code;
          if (code === 0) {
            this.$Message.success(res.data);
          } else {
            this.$Message.error(res.msg);
          }
          this.pageNum = 1;
          this.submitworkerinfo();
      })
    },
    /**提交删除一批员工的请求*/
    submitDeleteByList() {
      if (!(this.selectList.length == 0)) {
        this.apis.staffApis.personInfoDeleteMultiple(this.selectList,res=>{

              var code = res.code;
              if (code === 0) {
                this.$Message.success(res.data);
              } else {
                this.$Message.error(res.msg);
              }
              this.pageNum = 1;
              this.submitworkerinfo();
        })
      }else{
        this.$Message.warning("请至少选中一位员工进行删除！");
      }
    },
    /**提交禁用员工的请求 */
    submitForbid() {
      this.apis.staffApis.personInfoBan(this.row.id,res=>{
    
          var code = res.code;
          if (code === 0) {
            this.$Message.success(res.data);
          } else {
            this.$Message.error(res.msg);
          }
          this.pageNum = 1;
          this.submitworkerinfo();
      })
    },
    /**读取本地excel文件 */
    readLocalExcel(file){
      var that=this;
          const reader = new FileReader()
          reader.onload = function(e) {
            const data = e.target.result
            var wb = XLSX.read(data, {
              type: 'binary'
            })
             //这里只读取第一张表就可以了
            const result={
              sheetName:wb.SheetNames[0],
              sheet:XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
            }
        //    console.log(result);
            that.lookImportInfo(result);
          }
          reader.readAsBinaryString(file)
    },
    /**打开导入员工预览信息窗口 */
    lookImportInfo(result){
          var columns=[];
            //拿出表头（处理json数据）
            var obj=result.sheet[0];
            for (let k of Object.keys(result.sheet[0])) {
             columns.push(obj[k]);
            }
            this.importColumns=[];
            columns.forEach((title)=>{
              this.importColumns.push({
                title:title,
                key:title,
                width:180,
                fixed: title==='员工编号（不重复）'?'left':'',
              })
            })
            //拿出数据（处理json数据）
            var dataObj=[];
            for(var i=1;i<result.sheet.length;i++){
              dataObj.push(result.sheet[i]);
            }
            this.importData=[];
            this.importTotal=dataObj.length;
            for(var i=0;i<dataObj.length;i++){
              var dataArray=[];
               for (let k of Object.keys(dataObj[i])) {
                dataArray.push(dataObj[i][k]);
               }
               this.importData[i]={};
             // console.log(dataArray);
              for(var j=0;j<columns.length;j++){
                this.importData[i][columns[j]]=dataArray[j];
              }
            }
            this.importNum=1;
            this.lookImport=true;
    },
    /**导入员工预览信息换页处理 */
    handleImportPage(value){
      this.importNum=value;
    },
    /**确定导入员工 */
    importOk(){
        let form = new FormData();
        form.append("multipartFile",this.imprtFile);
        this.$Loading.config({
          height: 5
        })
         this.$Loading.start();
        this.apis.staffApis.personInfoImport(form,this,res=>{
              console.log("上传:",res);
                var code = res.code;
                if (code === 0) {
                  // this.$Message.destroy();
                   this.$Loading.finish();
                  this.$Message.success(res.data);
                
                } else {
                  // this.$Message.destroy();
                   this.$Loading.error();
                  this.$Message.error(res.msg);
                }
                this.lookImport=false;
                this.progress=0;
                this.pageNum = 1;
                this.submitworkerinfo();
        })
    },
    /**取消导入员工 */
    importNotOk(){
      //将绑定数据初始化
      this.lookImport=false;
      this.imprtFile='';
      this.importTotal=0;
      this.importNum=1;
      this.importColumns=[];
      this.importData=[];
    },
    /** 上传文件前*/
    uploadBefore(file){
      // console.log(this.readLocalExcel(file));

      this.readLocalExcel(file);
      this.imprtFile=file;
        // let form = new FormData();
        // form.append("multipartFile",file);
        // this.$Loading.config({
        //   height: 5
        // })
        //  this.$Loading.start();
        // this.apis.staffApis.personInfoImport(form,this,res=>{
        //       console.log("上传:",res);
        //         var code = res.code;
        //         if (code === 0) {
        //           // this.$Message.destroy();
        //            this.$Loading.finish();
        //           this.$Message.success(res.data);
                
        //         } else {
        //           // this.$Message.destroy();
        //            this.$Loading.error();
        //           this.$Message.error(res.msg);
        //         }
        //         this.progress=0;
        //         this.pageNum = 1;
        //         this.submitworkerinfo();
        // })
    },
    /**上传文件成功时调用的方法 */
    uploadSuccess(response) {

    },
    /**上传失败调用的方法 */
    uploadFaild(error) {

    }
  }
};
</script>
<style>
@import "../../../static/global.css"; /*引入公共样式*/
/**
#table th .ivu-checkbox{
  display: none;
}
*/
.flexBtn {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  width: 100%;
}

</style>
